<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>

<body>
    <div class="main">
        <header>
            <a href="#" class="home_page">home page</a>
            <a href="#" class="home_page">首页</a>
            <a href="#" id="1">1</a>
            <a href="#" id="2">2</a>
            <a href="#" id="3">3</a>
            <a href="#" id="4">4</a>
            <a href="#" id="5">5</a>
            <!-- 至于为什么这里会有个group...改进没做好造成的残留 -->
            <div class="group">
                <div id="search">
                    <form>
                        <input type="text" placeholder="search..." class="search">
                        <button type="button">搜索</button>
                    </form>
                </div>
                <a href="#" id="创作者中心">6</a>
                <div class="dropdown">
                    <a href="#" id="写文章">here</a>
                    <div class="dropdown_content">
                        click!
                    </div>
                </div>
            </div>
            <a href="#" id="登录">8</a>
        </header>

        <div class="following">
            <!-- 左侧边栏 -->
            <aside id="left_aside">
                <div class="l_button">
                    <button id="点赞"></button>
                    <button id="评论"></button>
                    <button id="收藏"></button>
                    <button id="举报"></button>
                    <div></div>
                    <p>分享</p>
                    <button id="微博"></button>
                    <button id="qq"></button>
                    <button id="微信"></button>
                </div>
            </aside>

            <!-- 主要内容 -->
            <div class="center">
                <div class="text" id="index1">
                    <h1>什么是HTML？</h1>
                    <p>HTML 是一个缩写，全称是 HyperText Markup Language，超文本标记语言.</p>
                    <p>
                        超文本是超级文本的意思，
                        一开始是因为网页通过超链接的方式将各个空间的文字连接起来
                        （早期的互联网还没有图片、音视频等内容）.
                        我们也可以理解为，
                        它将普通的文字进行了“升级”，让其拥有了表达更丰富信息的能力。<br>
                        例如,&lt;a href="https://www.baidu.com" &gt;
                        超链接&lt;/a&gt;就表示超链接这三个字是一个指向百度网站的超链接.
                    </p>
                    <p>
                        标记则表示了它描述内容的方式：
                        通过一对标签对要表达的内容进行标记，
                        例如&lt;p&gt;段落&lt;/p&gt;表示段落是一个段落，
                        段落二字被&lt;p&gt;&lt;/p&gt;所包裹.
                    </p>
                    <p>
                        语言表示了 HTML 是一个具有特定格式，或者说是“语法”的.
                        除了前文所说的标签标记以外，HTML，尤其是 HTML5 中还有很多规定/规范：
                    </p>
                    <ul>
                        <li>标签和属性不区分大小写，推荐小写</li>
                        <li>空标签可以不闭合，比如 input、meta</li>
                        <li>属性值推荐用双引号包裹</li>
                        <li>某些属性可以省略，比如 require、readonly</li>
                    </ul>
                </div>

                <div class="text" id="index2">
                    <h1>HTML的一般结构</h1>
                    <p>
                        html 文件开头通常有一行&lt;!DOCTYPE html&gt;，
                        表示要按照 W3C 的 HTML5 标准来解析渲染页面.
                        之后的内容由一对&lt;html&gt;标签包裹，
                        里面又分成&lt;head&gt;和&lt;body&gt;两部分.
                    </p>
                    <p>
                        &lt;head&gt;中的内容一般是与网页本身相关的内容，
                        比如网页的元数据信息&lt;meta&gt;，网页的标题title，
                        网页所需引入的其它文件&lt;link&gt;.
                        我们所见到和使用的网页一般都引入了 CSS 和 JS 文件来进行美化和交互.
                    </p>
                    <p>
                        浏览器将 html 文件及相关文件渲染成我们所见的到网页，
                        其中我们能看到的部分基本就是&lt;body&gt;中的部分.
                    </p>
                    <p>
                        如下文的代码，一个普通的网页一般有头部&lt;header&gt;，
                        主题内容&lt;main&gt;，和底部&lt;footer&gt;.
                        &lt;header&gt;中会放网站的 logo，
                        网站的导航部分，搜索栏等等.
                        &lt;footer&gt;中会放网站内部和其它网站的一些链接，以及版权信息等.
                    </p>
                    <p>
                        &lt;main&gt;中左右两边可能会有侧边栏，
                        放网页内的导航等一些与内容有关的内容
                        （也是各大网站广告的主要位置~）.
                        像博客类的网站可能还会有作者的一些信息.
                    </p>
                </div>

                <div class="img">
                    <img src="修勾.gif">
                    <img src="鼠鼠.gif">
                    <img src="牛牛.gif">
                    <img src="修猫.gif">
                </div>

                <div class="img" id="index3">
                    <h1>常见的HTML文档结构</h1>
                    <img src="代码截图.png" id="screen_shot">
                </div>

            </div>

            <!-- 包括右侧边栏的一片内容 -->
            <div class="right">
                <aside id="right_aside">
                    <div class="user">
                        <p>this is my html demo</p>
                        <div class="user_inf">
                            <div id="u_img">
                                <img src="UML.jpg">
                            </div>
                            <div id="u_space">
                                <a href="#">ma space</a>
                            </div>
                        </div>
                        <p>2021/10/21</p>
                    </div>
                    <div class="link">
                        <a>one</a>
                        <a>two</a>
                        <a>three</a>
                        <a>four</a>
                        <a>five</a>
                        <a>six</a>
                        <a>seven</a>
                    </div>
                    <div class="content">
                        <h2>content</h2>
                        <div class="content_link">
                            <div>
                                <a href="#index1">什么是HTML？</a>
                            </div>
                            <div>
                                <a href="#index2">HTML的一般结构</a>
                            </div>
                            <div>
                                <a href="#index3">常见的HTML文档结构</a>
                            </div>
                        </div>
                    </div>
                </aside>

            </div>
        </div>

        <footer>
            here is footer
        </footer>
    </div>
</body>

</html>